import { ConnectState } from '@/models/connect';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns } from '@ant-design/pro-table';
import React, { useState } from 'react';
import { connect, CurrentUser, Dispatch } from 'umi';
import { sellerStatistics, SellerStatisticsParamsType } from '@/services/seller';
import { Card, Descriptions, Tag } from 'antd';

interface SellerStatisticProps {
  dispatch: Dispatch;
  userState?: CurrentUser;
}

// "id": 123,
// "name": "广东省广州市绿地中央广场",//商户名称
// "pl_num": 1,//充电线数量
// "cabinet_num": 1,//机柜数量
// "pl_order_num":1,/充电线订单数量
// "pb_order_num":1,//充电宝订单数量
// "pl_order_amount": 32,//充电线订单总额
// "pb_order_amount": 43,//充电宝订单总额
interface SellerStatisticItemInfo {
  id: number;
  name: string;
  pl_num: number;
  cabinet_num: number;
  pl_order_num: number;
  pb_order_num: number;
  pl_order_amount: number;
  pb_order_amount: number;
  aid?: string | number;
  aname?: string;
}

const SellerStatisticList: React.FC<SellerStatisticProps> = (props) => {
  const { userState } = props;
  const [page, setPage] = useState(1); // 设置页数
  const [limit, setLimit] = useState(20); // 设置数据读取数
  const [total, setTotal] = useState(0); // 设置数据总数
  const [name, setName] = useState(''); // 设置过滤商户名称
  const [sid, setSid] = useState(''); // 设置商户id
  const [aid, setAid] = useState(''); // 设置代理id
  const [aname, setAname] = useState(''); // 设置代理名称

  const [totalBalance, setTotalBalance] = useState(0); // 总余额
  const [subtotalBalance, setSubtotalBalance] = useState(0); // 本页总计

  // 表格配置
  let columns: ProColumns<SellerStatisticItemInfo>[] = [
    {
      title: '商户Id',
      dataIndex: 'id',
      copyable: true,
    },
    {
      title: '代理Id',
      dataIndex: 'aid',
      copyable: true,
      hideInTable: true,
      hideInForm: true,
    },
    {
      title: '代理名称',
      dataIndex: 'aname',
      copyable: true,
      hideInTable: true,
      hideInForm: true,
    },
    {
      title: '商户名称',
      dataIndex: 'name',
      copyable: true,
    },
    {
      title: '充电线数量',
      dataIndex: 'pl_num',
      search: false,
    },
    {
      title: '充电线订单数量',
      dataIndex: 'pl_order_num',
      search: false,
    },
    {
      title: '充电线订单总金额',
      dataIndex: 'pl_order_amount',
      search: false,
      valueType: 'money',
    },
    {
      title: '机柜数量',
      dataIndex: 'cabinet_num',
      search: false,
    },

    {
      title: '充电宝订单数量',
      dataIndex: 'pb_order_num',
      search: false,
    },

    {
      title: '充电宝订单总金额',
      dataIndex: 'pb_order_amount',
      search: false,
      valueType: 'money',
    },
  ];

  // 判断代理等级是不是大于店铺代理
  if (
    props.userState &&
    props.userState.type &&
    (props.userState.type == 5 || props.userState.type < 5)
  ) {
    columns = columns.concat([
      {
        title: '店铺管理ID',
        search: false,
        dataIndex: 'said',
        copyable: true,
      },
      {
        title: '店铺管理名称',
        search: false,
        dataIndex: 'sname',
      },
    ]);
  }
  // 判断代理等级是不是大于等于业务代理
  if (
    props.userState &&
    props.userState.type &&
    props.userState.type != 5 &&
    props.userState.type >= 1
  ) {
    columns = columns.concat([
      {
        title: '业务代理ID',
        search: false,
        dataIndex: 'baid',
        copyable: true,
      },
      {
        title: '业务代理名称',
        search: false,
        dataIndex: 'bname',
      },
    ]);
  }
  // 判断代理等级是不是大于等于区域经理
  if (
    props.userState &&
    props.userState.type &&
    props.userState.type != 5 &&
    props.userState.type >= 2
  ) {
    columns = columns.concat([
      {
        title: '区域经理ID',
        search: false,
        dataIndex: 'aaid',
        copyable: true,
      },
      {
        title: '区域经理名称',
        search: false,
        dataIndex: 'aname',
      },
    ]);
  }
  // 判断代理等级是不是大于等于市级经理
  if (
    props.userState &&
    props.userState.type &&
    props.userState.type != 5 &&
    props.userState.type >= 3
  ) {
    columns = columns.concat([
      {
        title: '市级代理ID',
        search: false,
        dataIndex: 'caid',
        copyable: true,
      },
      {
        title: '市级代理名称',
        search: false,
        dataIndex: 'cname',
      },
    ]);
  }
  // 判断代理等级是不是大于等于省级经理
  if (
    props.userState &&
    props.userState.type &&
    props.userState.type != 5 &&
    props.userState.type == 4
  ) {
    columns = columns.concat([
      {
        title: '省级代理ID',
        search: false,
        dataIndex: 'paid',
        copyable: true,
      },
      {
        title: '省级代理名称',
        search: false,
        dataIndex: 'pname',
      },
    ]);
  }

  return (
    <PageContainer>
      <ProTable
        headerTitle="商户统计"
        scroll={{ x: 'max-content' }}
        rowKey={columns => columns.id}
        onReset={() => {
          setPage(1);
        }}
        tableExtraRender={(_, data) => (
          <Card>
            <Descriptions size="small" bordered={true}>
              <Descriptions.Item label="商户余额总计">{totalBalance}</Descriptions.Item>
              <Descriptions.Item label="每页余额总计">{subtotalBalance}</Descriptions.Item>
            </Descriptions>
          </Card>
        )}
        request={async () => {
          const data: SellerStatisticsParamsType = {
            uId: userState?.id!,
            userType: userState?.user_type!,
            token: userState?.token!,
            page: page,
            limit: limit,
            sname: name,
            sid: sid,
            aid: aid,
            aname: aname,
          };
          return sellerStatistics(data);
        }}
        postData={(res) => {
          console.log(res);
          setTotal((res as any).num);
          setTotalBalance((res as any).total_balance);
          setSubtotalBalance((res as any).subtotal_balance);
          (res as any).data.map((item: any) => {
            item.username = item?.user?.name;
            item.picture = item?.user?.picture;
            item.sellername = item?.seller?.name;
            item.sname = item?.sagency?.name;
            item.bname = item?.bagency?.name;
            item.aname = item?.aagency?.name;
            item.cname = item?.cagency?.name;
            item.pname = item?.pagency?.name;
            return item;
          });
          return (res as any).data;
        }}
        beforeSearchSubmit={(params: Partial<SellerStatisticItemInfo>) => {
          console.log(params);
          // 查找商户
          if (params.name) {
            setName(params.name);
          } else {
            setName('');
          }
          // 查找商户id
          if (params.id) {
            setSid(params.id + "");
          } else {
            setSid("");
          }
          if (params.aid) {
            setAid(params.aid + "");
          } else {
            setAid("");
          }
          // 代理名称
          if (params.aname) {
            setAname(params.aname);
          } else {
            setAname("");
          }
          return params;
        }}
        pagination={{
          pageSize: limit,
          total: total,
          onChange: (page) => {
            setPage(page);
          },
          onShowSizeChange: (_, size) => {
            setLimit(size);
          },
        }}
        columns={columns}
      ></ProTable>
    </PageContainer>
  );
};

export default connect(({ user }: ConnectState) => ({ userState: user.currentUser }))(
  SellerStatisticList,
);
